.row.wrapper.border-bottom.white-bg.page-heading
  .col-lg-12
    h2 &#x8282;&#x70B9;&#x7EC4;&#x7BA1;&#x7406;
    |         
    ol.breadcrumb
      li
        a &#x8282;&#x70B9;&#x7BA1;&#x7406;
      |             
      li.active
        b &#x8282;&#x70B9;&#x7EC4;&#x7BA1;&#x7406;
.wrapper.wrapper-content.animated.fadeInRight
  .row
    .col-lg-12
      .ibox
        .ibox-title
          h3
            span.text-navy &#x8282;&#x70B9;&#x7EC4;&#x7BA1;&#x7406;
        |                 
        .ibox-content
          form#form.form-horizontal(method='post', onsubmit='return false')
            .form-group
              label.col-sm-1.control-label &#x8282;&#x70B9;&#x7EC4;
              |                             
              .col-sm-2
                input.form-control(type='text', name='nodeGroup', placeholder='请输入节点组')
              |                             
              label.col-sm-1.control-label &#x8282;&#x70B9;&#x7C7B;&#x578B;
              |                             
              .col-sm-2
                select.form-control(name='nodeType')
                  option(value='') &#x6240;&#x6709;
                  |                                     
                  option(value='JOB_CLIENT') JobClient
                  |                                     
                  option(value='TASK_TRACKER') TaskTracker
              |                             
              .col-sm-1(style='margin-left:10px;width:70px;')
                button#searchBtn.btn.btn-primary(type='button')
                  | &#x641C;&#x7D22;
              |                             
              .col-sm-1
                button#addBtn.btn.btn-warning(type='button')
                  | &#x6DFB;&#x52A0;
            |                         
            .hr-line-dashed
  |     
  .row
    .col-lg-12
      .ibox
        #ltstableContainer.ibox-content
script#ltstable(type='text/html').
  <table class="table table-stripped toggle-arrow-tiny footable" data-page-size="10">
  <thead>
  <tr>
  <th data-toggle="true">节点类型</th>
  <th>节点组名</th>
  <th>节点组创建时间</th>
  <th>操作</th>
  </tr>
  </thead>
  <tbody>
  {{each rows as row index}}
  <tr>
  <td>{{row.nodeType}}</td>
  <td>{{row.name}}</td>
  <td>{{row.gmtCreated | dateFormat:'yyyy-MM-dd HH:mm:ss'}}</td>
  <td>{{row.opt | format:'optFormat',row}}</td>
  </tr>
  {{/each}}
  {{if results == 0}}
  <tr>
  <td colspan="4">暂无数据</td>
  </tr>
  {{/if}}
  </tbody>
  <tfoot>
  <tr>
  <td colspan="4">
  <span>共{{results}}条记录，每页展示{{pageSize}}条</span>
  <ul class="pagination-sm pull-right"></ul>
  </td>
  </tr>
  </tfoot>
  </table>
script.
  $(document).ready(function () {
  LTS.colFormatter.optFormat = function (v, row) {
  return '<a href="javascript:;" class="node-group-del-btn" nodeGroup="' + row.name + '" nodeType="' + row.nodeType + '">' +
  '<span class="label label-primary" style="background-color: #DD6B55;"><i class="fa fa-trash-o"></i> 删除</span></a>';
  }
  var ltsTable = $("#ltstableContainer").ltsTable({
  url: 'api/node/node-group-get',
  templateId: 'ltstable'
  });
  $(document).on("click", "#searchBtn", function () {
  var params = {};
  $.each($('#form').parent().find(".form-control"), function () {
  var name = $(this).attr("name");
  var value = $(this).val();
  params[name] = value;
  });
  ltsTable.post(params, 1);
  });
  $(document).on("click", ".node-group-del-btn", function () {
  var nodeGroup = $(this).attr("nodeGroup");
  var nodeType = $(this).attr("nodeType");
  var _this = $(this);
  swal({
  title: "确认要删除该节点组吗？",
  text: "对应的该节点组的数据也将被删除，请谨慎操作 !",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "确认删除",
  closeOnConfirm: false
  }, function (isConfirm) {
  if(isConfirm){
  $.ajax({
  url: 'api/node/node-group-del',
  type: 'POST',
  dataType: 'json',
  data: {nodeGroup: nodeGroup, nodeType: nodeType},
  success: function (json) {
  if (json && json.success) {
  swal("删除成功!", "恭喜你", "success");
  _this.parents("tr").remove();
  } else {
  json ? swal(json['msg']) : {};
  }
  }
  });
  }
  });
  });
  $(document).on("click", "#addBtn", function(){
  var nodeGroup = $("input[name='nodeGroup']").val();
  var nodeType = $("select[name='nodeType']").val();
  if (!nodeGroup) {
  sweetAlert("请输入节点组名称", "节点组名称不能为空。", "error");
  return;
  }
  if (!nodeType) {
  sweetAlert("请选择节点类型", "节点类型不能为空。", "error");
  return;
  }
  $.ajax({
  url: 'api/node/node-group-add',
  type: 'POST',
  dataType: 'json',
  data: {nodeGroup: nodeGroup, nodeType: nodeType},
  success: function (json) {
  if (json && json.success) {
  $("input[name='nodeGroup']").val("");
  $("select[name='nodeType']").val("");
  $('#searchBtn').trigger("click");
  } else {
  json ? swal(json['msg']) : {};
  }
  }
  });
  });
  $("#searchBtn").trigger("click");
  });
